<template>
    <div id="makelessors">
        <div style="margin: 20px 20px 10px 0; width: 30%">
            <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
                <el-select v-model="select" slot="prepend" placeholder="请选择">
                    <el-option label="地址" value="address"></el-option>
                    <el-option label="车位号" value="number"></el-option>
                    <el-option label="价格" value="price"></el-option>
                </el-select>
                <el-button slot="append" icon="el-icon-search" @click="serach"></el-button>
            </el-input>
        </div>
        <el-table :data="parkingsData.pagerows" height="400" border style="width: 100%">
            <!-- <el-table-column align="center" prop="_id" label="编号" width="180">
            </el-table-column>-->
            <el-table-column align="center" prop="address" label="地址" width="140"></el-table-column>
            <el-table-column align="center" prop="number" label="车位号"></el-table-column>
            <el-table-column align="center" prop="property" label="产权信息">
                <!-- <template slot-scope="scope">
                    {{ scope.row.classid.classname }}
                </template>-->
            </el-table-column>

                <el-table-column align="center"  label="出租方电话">
                <template slot-scope="scope">
                    {{ scope.row.lessorsId.telephone}}
                </template>
            </el-table-column>
            <!-- <el-table-column label="状态" prop="state" align="center">
            </el-table-column>-->

            <el-table-column label="出租周期" prop="cycle" align="center">
                <!-- <template slot-scope="scope"> -->
                <!-- <el-image
                        style="width: 50px; height: 50px"
                        :src="
                            'http://localhost:3000/images/' +
                            (scope.row.imagename || 'default.jpg')
                        "
                        fit="contain"
                ></el-image>-->
                <!-- </template> -->
            </el-table-column>
            <el-table-column align="center" prop="price" label="价格"></el-table-column>
            <el-table-column align="center" width="100" label="状态">
                <template slot-scope="scope">
                    <div style="color:white">
                        <span v-if="scope.row.state==1" style="color:black">未审核</span>
                        <span v-if="scope.row.state==2"><span style="background-color:green">审核通过</span></span>
                        <span v-if="scope.row.state==3"><span style="background-color:red">审核未通过</span></span>
                        <span v-if="scope.row.state==4" style="color:black">已上架</span>
                        <span v-if="scope.row.state==5" style="color:black">已出租</span>
                        <span v-if="scope.row.state==6"><span style="background-color:yellow">审核中</span></span>
                    </div>
                </template>s
            </el-table-column>

            <el-table-column label="操作" align="center" width="300">
                <template slot-scope="scope">
                    <el-button size="mini" @click="EditParkings(scope.row._id)">编辑</el-button>
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row._id)"
                    >删除</el-button>
                    <!--是否通过审核 -->
                     <el-dropdown v-if="(scope.row.state == 1||scope.row.state == 2||scope.row.state == 3||scope.row.state ==4||scope.row.state == 5||scope.row.state == 6)">
                        <el-button type="primary" >
                            选择
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item ><button @click="changestate(scope.row._id, (value = 1))">未审核</button></el-dropdown-item>
                            <el-dropdown-item ><button @click="changestate(scope.row._id, (value = 2))">审核通过</button></el-dropdown-item></el-dropdown-item>
                            <el-dropdown-item ><button @click="changestate(scope.row._id, (value = 3))">审核失败</button></el-dropdown-item>
                            <el-dropdown-item ><button @click="changestate(scope.row._id, (value = 4))">已上架</button></el-dropdown-item>
                            <el-dropdown-item ><button @click="changestate(scope.row._id, (value = 5))">已出租</button></el-dropdown-item>
                            <el-dropdown-item ><button @click="changestate(scope.row._id, (value = 6))">下架</button></el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="parkings.currentPage"
            :page-sizes="[3, 4, 5, 6]"
            :page-size="3"
            layout="total, sizes, prev, pager, next, jumper"
            :total="parkingsData.totalitem"
        ></el-pagination>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions, mapMutations } = createNamespacedHelpers(
    "admins"
);

export default {
    data() {
        return {
            input: "",
            select: "address",
            isSort: false,
        };
    },
    watch: {
        "parkings.pageSize"() {
            this.getParkings();
        },
        "parkings.currentPage"() {
            this.getParkings();
        },
        "parkings.value"() {
            this.getParkings();
        },
    },
    mounted() {
        this.getParkings();
    },
    computed: {
        ...mapState(["parkings", "parkingsData"]),
    },
    methods: {
        ...mapActions(["getParkings", "modifyParkings", "deleteParkings"]),
        ...mapMutations([
            "changeCurrentPagep",
            "changeValuep",
            "changePageSizep",
        ]),

        //编辑车位
        EditParkings(val) {
            this.$router.push("/system/editparkings/" + val);
        },
        //搜索
        serach() {
            this.parkings.type = this.select;
            this.parkings.value = this.input;
        },
        handleSizeChange(val) {
            this.changePageSizep(val);
        },
        handleCurrentChange(val) {
            this.changeCurrentPagep(val);
        },
        // handleEdit(index, row) {
        //     this.$router.push(`/studentinfo/updatastudent/${row._id}`);
        // },

        //刪除出租方信息
        async handleDelete(index, row) {
            const result = await this.deleteParkings(row);
            if (result.status) {
                if (this.parkingsData.pagerows.length <= 1) {
                    this.parkings.currentPage--;
                }
                this.getParkings();
            } else {
                alert("刪除失敗");
            }
        },

        //更新出租方state是否冻结
        async changestate(id, value) {
            const reslut = await this.modifyParkings({ _id: id, state: value });
            if (reslut.status) {
                this.getParkings();
            } else {
                alert("操作失败");
            }
        },
    },
};
</script>

<style scoped>
.el-dropdown {
    vertical-align: top;
    margin-left: 10px;
}
.el-dropdown + .el-dropdown {
    margin-left: 15px;
    line-height: 30px;
}

.el-button {
    padding: 3px;
}
.el-icon-arrow-down {
    font-size: 12px;
}
.el-select {
    width: 80px;
}
.input-with-select .el-input-group__prepend {
    background-color: #fff;
}
table {
    width: 98%;
    height: 98%;
    margin: 0 auto;
    margin-top: 20px;
    text-align: center;
    border-collapse: collapse;
}
tr {
    height: 40px;
}
select {
    margin-top: 20px;
}
#buttons {
    width: 80%;
    margin: 0 auto;
    margin-top: 20px;
    height: 60px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
button {
    height: 30px;
    width: 80px;
}
.el-pagination {
    margin-top: 10px;
    text-align: center;
}
</style>